import React from 'react';
import FormField from '../FormField';
import UploadArea from '../UploadArea';
import './FormSection.css';

const FormSection = ({
  fields = [],
  uploadAreas = [],
  onSubmit = () => {},
  onCancel = () => {},
  submitText = "确认保存",
  cancelText = "取消",
  className = ''
}) => {
  return (
    <div className={`form-section ${className}`}>
      <div className="form-section__fields">
        {fields.map((field, index) => (
          <FormField
            key={index}
            {...field}
          />
        ))}
      </div>
      
      {uploadAreas.length > 0 && (
        <div className="form-section__uploads">
          {uploadAreas.map((upload, index) => (
            <UploadArea
              key={index}
              {...upload}
            />
          ))}
        </div>
      )}
      
      <div className="form-section__actions">
        <button className="form-section__btn form-section__btn--submit" onClick={onSubmit}>
          {submitText}
        </button>
        <button className="form-section__btn form-section__btn--cancel" onClick={onCancel}>
          {cancelText}
        </button>
      </div>
    </div>
  );
};

export default FormSection;
